/*
 * @Author: wangtao
 * @Date: 2021-02-18 11:21:01
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 16:34:57
 * @Description: file content
 */
import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  PixelRatio,
} from 'react-native';
import moment from 'moment';
import {
  empty01,
  iconGuoshouGreenInsurance,
} from '@/images';
import {
  msg,
  XMListView,
  XMEmpty,
  Button
} from '@/common';
import {
  fontColorBlack,
  fontColorDeepGray,
  fontColorDeepGreen,
  fontColorOrange,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  screenWidth,
  splitLineColorLightGray,
} from '@/styles';
import HeadTabs from '../../../components/HeadTabs';

const { Submit } = Button;

const tabSources = [
  {
    tab: '全部',
    type: null,
  },
  {
    tab: '保障中',
    type: '1',
  },
  {
    tab: '未起保',
    type: '2',
  },
  {
    tab: '已终止',
    type: '3',
  },
];

export default class InsuranceListMy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: null,
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    const { status } = this.state;
    return (
      <View style={styles.container}>
        <HeadTabs
          tabSources={tabSources}
          changeStatus={(type) => this.changeStatus(type)}
          status={status} // 当前选中的页面下标状态
          style={{ width: screenWidth }}
        />
        <XMListView
          url='factoring-bps-api/api/v1/approval/page/policy'
          methods='GET'
          params={{ insurStatus: status }}
          dataPropsName='data.appList'
          renderRow={(item, index) => this._renderItem(item, index)}
          renderEmpty={() => {
            return (
              <XMEmpty
                emptyImg={empty01}
                boxStyle={{ marginTop: px2dp(80) }}
                desc='暂无数据'
              />
            );
          }}
          noMoreText='没有更多啦~'
          columnWrapperStyle={styles.bigBox}
          // style={{marginBottom: px2dp(200)}}
          numColumns={1}
        />
      </View>
    );
  }

  _renderItem = (item, index) => {
    return (
      <TouchableOpacity
        style={styles.itemWrap}
        activeOpacity={0.8}
        onPress={() => {
          msg.emit('router: goToNext', {
            routeName: 'InsuranceDetail',
            applicationNo: item.applicationNo,
          });
        }}
      >
        <View style={styles.itemContent}>
          <View style={styles.itemHeader}>
            <Image
              source={iconGuoshouGreenInsurance}
              resizeMode='contain'
              style={styles.logoImg}
            />
            <Text style={styles.carNum}>{item.carNo}</Text>
          </View>

          <View style={styles.insuranceListWrap}>
            {item.list.map((i) => {
              return (
                <View style={styles.insuranceItem}>
                  <Text style={styles.insuranceItemRight}>
                    <Text style={styles.label}>
                      {i.insurType.name}
                      {' '}
                    </Text>
                    <Text style={styles.dateRange}>
                      {moment(i.insurEffectStartDate).format('YYYY-MM-DD')}
                      {' '}
                      至
                      {' '}
                      {moment(i.insurEffectEndDate).format('YYYY-MM-DD')}
                    </Text>
                  </Text>
                  <Text
                    style={[
                      styles.statusText,
                      this.renderStatusColor((i.insurStatus && i.insurStatus.code) ? i.insurStatus.code : '1'),
                    ]}
                  >
                    {(i.insurStatus && i.insurStatus.name) ? i.insurStatus.name : ''}
                  </Text>
                </View>
              );
            })}
          </View>
        </View>

        <View style={styles.itemBtnWrap}>
          <Submit
            text='再次投保'
            boxStyle={{
              width: px2dp(160),
              height: px2dp(56),
              borderRadius: px2dp(12),
              overflow: 'hidden',
              backgroundColor: mainBgColorWhite,
              borderWidth: 1 / PixelRatio.get(),
              borderColor: fontColorSecDeepGray,
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorSecDeepGray,
            }}
            onClick={() => {
              msg.emit('router: goToNext', {
                routeName: 'InsuranceApplyForm',
                applicationNo: item.applicationNo,
              });
            }}
          />
        </View>
      </TouchableOpacity>
    );
  };

  renderStatusColor = (status) => {
    switch (status) {
    case '1':
      return { color: fontColorDeepGreen };
    case '2':
      return { color: fontColorOrange };
    case '3':
      return { color: fontColorDeepGray };
    }
  };

  onChange = (key, val) => {
    this.setState({ [key]: val });
  };

  changeStatus = (status) => {
    // 根据status 状态去加载不同的数据
    this.setState({ status });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  itemWrap: {
    width: px2dp(702),
    borderRadius: px2dp(16),
    overflow: 'hidden',
    marginTop: px2dp(24),
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(24),
  },
  itemContent: {
    justifyContent: 'space-between',
    paddingVertical: px2dp(32),
  },

  itemBtnWrap: {
    height: px2dp(112),
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingHorizontal: px2dp(10),
    borderTopColor: splitLineColorLightGray,
    borderTopWidth: 1 / PixelRatio.get(),
  },
  itemHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  logoImg: {
    width: px2dp(50),
    height: px2dp(50),
  },
  carNum: {
    color: fontColorBlack,
    fontWeight: 'bold',
    marginLeft: px2dp(15),
  },
  insuranceListWrap: {
    marginTop: px2dp(20),
  },
  insuranceItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  insuranceItemRight: {
    flexDirection: 'row',
    fontSize: px2dp(26),
    color: fontColorBlack,
    lineHeight: px2dp(48),
  },
  statusText: {
    flex: 1,
    fontSize: px2dp(26),
    color: fontColorBlack,
    lineHeight: px2dp(48),
    textAlign: 'right',
    color: fontColorDeepGreen,
  },
  label: {
    marginRight: px2dp(24),
    color: fontColorSecDeepGray,
  },
});
